<template>
    <div class="menu">
        <el-dialog v-model="isDialogTwo" width="30%" :modal='true' title="提示">
            <div class="dialog-content">{{ message }}</div>
        </el-dialog>
        <el-dialog v-model="isDialog" width="20%" top="20%" :modal='true' title="提示">
            <div style="display: flex;flex-direction: row; width: 100%; justify-content: space-around; ">
                <label for="">请输入密码</label>
                <input style="width: 60%;" type="password" v-model="password">
            </div>
            <div style="display: flex;flex-direction: row; width: 100%; justify-content: space-around; margin-top: 5%;">
                <el-button @click="isDialog = false, password = ''">取消</el-button>
                <el-button @click="confirm" type="primary">确认</el-button>
            </div>
        </el-dialog>
        <div class="main">

            <div class="left">
                <div class="item" :class="{ 'activity': SerIndex == index }"
                    @click="SerIndex = index, console.log(SerIndex)" v-for="(item, index) in serveice" :key="index">
                    <img :src="item.icon" alt="">
                    <text :class="{ 'activity_text': SerIndex == index }"
                        style="font-size: 16px; display: flex;height: 100%;justify-content: center;align-items: center;">{{ item.name }}</text>
                </div>
            </div>
            <div class="right">
                <div v-if="SerIndex == 0" style="display: flex;flex-direction: column;height: 100%; width: 100%;">
                    <text style="font-size: 40px; 
                    margin-bottom: 0.5%; 
                    font-weight: bold;">账户信息</text>
                    <div style="margin-left: 1%;">
                        <div style="display: flex;width: 40%; flex-direction: column;">
                            <div style="width: 40%; display: flex; justify-content: space-between;">
                                <text class="textStyle"> 用户名：{{ userName }} </text>
                            </div>
                            <div style="width: 40%; display: flex; justify-content: space-between;">
                                <text class="textStyle"> 用户ID：{{ userId }}</text>
                            </div>
                        </div>
                        <div style="width: 17%; display: flex; justify-content: space-between;">

                            <text class="textStyle">余额：{{ isSecure ? balance : balanceM }}</text>

                            <el-button key="" type="primary" v-if="!isSecure" @click="searchBalance">查询</el-button>
                        </div>
                        <div style="margin-top: 0.5%; width: 50%; display: flex;">
                            <h2  >交易记录:</h2>
                        </div>
                        <div style="height:370px; width: 80%;
                        margin-bottom: 4%;
                        margin-left: 5%;
                        padding: 1%;
                        margin-top: 1%;
                        padding-bottom: 3%;
                        border-radius: 10px;
                        background-color: #f1f2f1;" >
                            <div style=" height:5%; display: flex; justify-content: space-between; margin-bottom: 2%;">
                                <text class="item_active" style="font-size: 18px; font-weight: bold;letter-spacing: 40px; ">时间</text> 
                                <text class="item_active" style="font-size: 18px; font-weight: bold;">交易类型</text> 
                                <text class="item_active" style="font-size: 18px; font-weight: bold;">汇款人</text>
                                <text class="item_active" style="font-size: 18px; font-weight: bold;">金额</text> 
                                <text class="item_active" style="font-size: 18px; font-weight: bold;">收款人</text> 
                            </div>
                                <el-scrollbar ref="scrollbar" style="height: 90%; margin-bottom: 0.5%;" always: true @scroll="scroll">
                                    <div v-if="historyList?.data.length != 0" v-for="history in historyList?.data"   
                                        style="height: 40px;
                                        align-items: center;
                                        display: flex;flex-direction: row; 
                                        justify-content: space-between;"
                                         >
                                        <text class="item_active">{{ history.time }}</text> 
                                        <text class="item_active">{{  
                                            history.transaction_type == "1" ? "存款" :
                                            history.transaction_type == "2" ? "取款" :
                                            history.transaction_type == "3" ? "转账" : "未知"
                                        }}</text> 
                                        <text class="item_active">{{ history.account }}</text>
                                        <text class="item_active">{{ history.money }}</text> 
                                        <text class="item_active">{{ history.accepter_name==null ? "无" : history.accepter_name}}</text>
                                    </div>
                                    <div v-else  style="width: 100%;display: flex; justify-content: center;">
                                      ....面前还没有交易记录....
                                    </div>
                                </el-scrollbar>
                            <div style="width: 100%;display: flex;justify-content: end;">
                                总条数：{{ historyList?.data.length }} 条
                            </div>
                        </div>
                        <div style="display: flex; width: 100%; justify-content: center;margin-top:0%;">
                            <el-button style="" type="success" @click="quitLogin">退出登录</el-button>
                        </div>
                    </div>

                </div>
                <div v-if="SerIndex == 1 || SerIndex == 2" style="display: flex;
                flex-direction: column;
                height: 35%; width: 40%; 
                background: #f1f2f1;
                border-radius: 5px;
                align-self: center; 
                margin-left: 28%;
                padding: 2%;
                ">
                    <h2 v-if="SerIndex == 1">存款</h2>
                    <h2 v-if="SerIndex == 2">取款</h2>
                    <div
                        style="display: flex;flex-direction: row; width: 60%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <label for="">请输入金额</label>
                        <input type='text' v-model="TRmoney">
                    </div>
                    <div
                        style="display: flex;flex-direction: row; width: 50%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <el-button type="" @click="TRmoney = 0">重置</el-button>
                        <el-button type="primary" @click="AddorSubMoney">确认</el-button>
                    </div>

                </div>
                <div v-if="SerIndex == 3" style="display: flex;
                flex-direction: column;
                height: 45%; width: 40%; 
                background: #f1f2f1;
                border-radius: 5px;
                align-self: center; 
                margin-left: 28%;
                padding: 2%;
                ">
                    <h2>转账</h2>
                    <div
                        style="display: flex;flex-direction: row; width: 70%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <label for="" style="width: 30%;">收款用户名</label>
                        <input type='text' v-model="receiver">
                    </div>
                    <div
                        style="display: flex;flex-direction: row; width: 70%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <label for="" style="width: 30%;">汇款金额</label>
                        <input type='text' v-model="TRmoney">
                    </div>
                    <div
                        style="display: flex;flex-direction: row; width: 50%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <el-button type="" @click="TRmoney = 0, receiver = ''">重置</el-button>
                        <el-button type="primary" @click="transferMoney">确认</el-button>
                    </div>

                </div>

                <div v-if="SerIndex == 4" style="display: flex;
                flex-direction: column;
                height: 35%; width: 40%; 
                background: #f1f2f1;
                border-radius: 5px;
                align-self: center; 
                margin-left: 28%;
                padding: 2%;
                ">
                    <h2>修改密码</h2>
                    <div
                        style="display: flex;flex-direction: row; width: 70%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <label for="" style="width: 30%;">请输入新密码</label>
                        <input type='text' v-model="new_password">
                    </div>
                    <div
                        style="display: flex;flex-direction: row; width: 50%; justify-content: space-around; justify-self: center; align-self: center; margin-top: 10%">
                        <el-button type="" @click="new_password = ''">重置</el-button>
                        <el-button type="primary" @click="updatePassword">确认</el-button>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import back from '@/components/back.vue'
import router from '@/router';
import { getHsitoryApi, putTransferMoney, putUpdatepassword, selectBlance, updateMoney, verifyPassword } from '@/service/menu';
import { useInfoStore } from '@/stores/userInfoStore';
import type { ResultHistroyType } from '@/type/menu';
import { ok } from 'assert';
import axios from 'axios';
import { log } from 'console';
import { get } from 'http';
import { watch,onMounted, ref} from 'vue'
import { useRoute} from 'vue-router';

const Store=useInfoStore()
// console.log("get",  Store.userInfo);
const userId = Store.userInfo?.id
// console.log("userId", userId);
const userName = Store.userInfo?.account
// console.log("userName", userName);
const SerIndex = ref<number>(0)
watch(SerIndex,(newVal:number)=>{
    if(newVal==0){
        getHsitoryList()
    }
})
const serveice = ref([{ name: '账户信息', icon: '../image/icon/server_icon/qianbao_o.png' },
{ name: '存款', icon: '../image/icon/server_icon/cunkuan_o.png' },
{ name: '取款', icon: '../image/icon/server_icon/jiekuan_o.png' },
{ name: '转账', icon: '../image/icon/server_icon/huopinfenliu_o.png' },
{ name: '修改密码', icon: '../image/icon/server_icon/bianji_o.png' },
])
// console.log(serveice.value[0].icon);
const route = useRoute()
const balance = ref(0.00)
const balanceM = ref<string>("***** ")
const password = ref("")
const new_password = ref("")
const receiver = ref("")
const message = ref("")
const isSecure = ref(false)
const isDialog = ref(false)
const isHistory = ref(false)
const isDialogTwo = ref(false)
const typeVer = ref(0)
const TRmoney = ref(0)
const pageNumber = ref(1)
const pageSize = ref(100)
const historyList = ref<ResultHistroyType>()
const scrollbar=ref<HTMLElement | null>(null)
onMounted(()=>{
    // console.log('pass')
    getHsitoryList()
})
const scroll=(event:Event)=>{
 
// //   console.log(event)
//   const scrollTop=event.scrollTop as number
//   console.log("scrollTop",scrollTop)
//   const scrollHeigt=scrollbar.value?.clientHeight
// console.log("scrollHeight",scrollbar.value)
}

const loadMoreData=()=>{

}

async function getHsitoryList() {
    axios.get(`http://localhost:5000/api/get/history?account=${userName}&pageNumber=${pageNumber.value}&pageSize=${pageSize.value}`)
        .then(res => {
            historyList.value = res.data;
        });
}
const searchBalance = () => {
    isDialog.value = true
    typeVer.value = 1
}
const quitLogin = () => {
    Store.clearinfo()
    router.back()
}
const transferMoney = () => {
    if (receiver.value == '' || receiver.value == userName) {
        openDialogTwo("请输入有效的收款人用户名")

    } else {
        if (TRmoney.value <= 0) {
            openDialogTwo("请输入有效金额")
        }
        else {
            isDialog.value = true
            typeVer.value = 2
        }
    }

}
const AddorSubMoney = () => {
    if (TRmoney.value <= 0) {
        openDialogTwo("请输入有效金额")
    } else {
        isDialog.value = true
        typeVer.value = 2
    }
}
const updatePassword = () => {
    if (new_password.value == '') {
        openDialogTwo("请输入有效的新密码")
    }
    else {
        isDialog.value = true
        typeVer.value = 2
    }
}

const openDialogTwo = (info: string) => {
    message.value = info
    isDialogTwo.value = true
}
const getBalace = async () => {
    if (userId) {
        const res = await selectBlance(userId as string)
        balance.value = res.money
    }
    else {
        console.log("userId not exist");
    }
}
// 验证密码
const getverifyPassword = async (password: string, id: string) => {
    const res = await verifyPassword(password, id)
    return res.data
}
const confirm = async () => {
    const res = await getverifyPassword(userId as string, password.value,)
    if (res) {
        isDialog.value = false
        if (typeVer.value == 1) {
            password.value = ""
            getBalace()
            isSecure.value = true
            setTimeout(() => {
                isSecure.value = false
                typeVer.value = 0
            }, 10000)
        }
        if (typeVer.value == 2) {

            if (SerIndex.value == 1) {
                password.value = ""
                //存款
                const res = await updateMoney(userName as string, TRmoney.value)

                balance.value = res.money
                openDialogTwo("存款成功")
            }
            if (SerIndex.value == 2) {
                password.value = ""
                //取款
                if (balance.value < TRmoney.value) {
                    openDialogTwo("余额不足")
                } else {
                    const res = await updateMoney(userName as string, -TRmoney.value)
                    balance.value = res.money
                    openDialogTwo("取款成功")
                }
            }
            if (SerIndex.value == 3) {
                password.value = ""
                //转账
                if (receiver.value == userName) {
                    openDialogTwo("不能转账给自己")
                } else {
                    const res = await putTransferMoney(TRmoney.value, userName as string, receiver.value)
                    balance.value = res.money
                    openDialogTwo(res.message)
                }
            }
            if (SerIndex.value == 4) {
                //修改密码
                const res = await putUpdatepassword(userName as string, password.value, new_password.value)
                // console.log('password',password.value);
                if (res.data) {
                    openDialogTwo(res.message)
                    password.value = ''
                    new_password.value = ''
                }
                else {
                    openDialogTwo("修改失败,请联系管理员")
                    password.value = ''
                    new_password.value = ''
                }
            }
        }
    }
    else {
        password.value = ""
        openDialogTwo("密码错误")
    }
}
</script>

<style scoped>
.textStyle {
    font-size: 20px;
}
.item_active {
   width: 25%; 
   display: flex; 
   justify-content: center;
}

.left {
    background-color: #e7e0e0c4;
    height: 100%;
    width: 15%;
    /**
     * display: flex;
     */
    flex-direction: column;
    justify-content: space-around;
    border-radius: 10px;
    padding: 1%;
}

.item {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;

}

.activity {
    background-color: #8870707d;
}

.activity_text {
    font-weight: bolder;
}

.right {
    background-color: #e7e0e0c4;
    height: 100%;
    padding: 2%;
    width: 83%;
    display: flex;
    border-radius: 10px;
}

.menu {
    height: 100%;
    width: 100%;
}

.main {
    margin-top: 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 95%;
    /* border: 1px solid #201e1e; */
}
</style>